<template>
  <div id="album-detail" class="content-box mtop-20">
    <top-info tagName="专辑" :playList="album">
      <!-- 图片 -->
      <template #picture>
        <img
          class="img-percent"
          v-lazy="`${album.picUrl}?param=300y300`"
        >
      </template>
      <!-- 按钮 -->
      <template #btns>
        <a-button class="mright-10 br-30 play-all" type="danger" @click="playAll">
          <a-icon class="font-16" type="caret-right" />播放全部
        </a-button>
        <a-button class="mright-10 br-30 play-all" @click="subOne(1)" v-show="subShow">
          <a-icon class="font-16" type="folder-add" />
          收藏({{ dynamicInfo.subCount }})
        </a-button>
        <a-button class="mright-10 br-30 play-all" @click="subOne(0)" v-show="!subShow">
          <a-icon class="font-16" type="check" />
          已收藏({{ dynamicInfo.subCount }})
        </a-button>
        <a-button class="br-30 play-all">
          <a-icon class="font-16" type="logout" style="transform: rotate(-45deg);" />
          分享({{ dynamicInfo.shareCount }})
        </a-button>
      </template>
      <!-- 其他描述信息 -->
      <template>
        <div class="font-16">
          歌手：
          <span
            class="pointer sing-name"
            v-for="art in album.artists"
            :key="art.id"
            @click="goDetail(art.id)"
          >
            {{ art.name }}
          </span>
        </div>
        <div class="font-16">
          时间：
          <span>{{ publishTime }}</span>
        </div>
      </template>
    </top-info>
    <Tabs :tabList="tabList" @target="target" />
    <!-- 歌单列表 -->
    <div v-show="modules === 'songsList'" class="song-list">
      <MyList :columns="columns" :dataSource="songs" />
    </div>
    <!-- 评论 -->
    <Discuss
      ref="discuss"
      :newTotal="total"
      :newComments="comments"
      :resourceType="3"
      v-show="modules === 'comments'"
      @scrollTo.passive="scroll"
    />
    <!-- 专辑详情 -->
    <div class="mtop-20" v-show="modules === 'albumDetail'">
      <h2 class="font-weight">专辑介绍</h2>
      <div class="description">
        <p v-for="(txt, index) in description" :key="index">
          {{ txt }}
        </p>
      </div>
    </div>
  </div>
</template>

<script>
import { subAlbum } from '@/api';
import { albumInfo, dynamicAlbum, albumComments } from '@/api/detail';
import { changeTimeStamp } from '@/utils/figure';
import Discuss from '@/components/Detail/Discuss';
import TopInfo from '@/components/Detail/TopInfo';
import MyList from '@/components/Detail/List';
import Tabs from '@/components/Content/Tabs';

export default {
  name: 'albumDetail',

  components: {
    Tabs,
    Discuss,
    MyList,
    TopInfo
  },

  data() {
    return {
      modules: 'songsList',
      album: {},
      songs: [],
      dynamicInfo: {},
      tabList: [{
        tabName: '歌曲列表',
        isActive: true,
        id: 'songsList'
      }, {
        tabName: '评论',
        isActive: false,
        id: 'comments'
      }, {
        tabName: '专辑详情',
        isActive: false,
        id: 'albumDetail'
      }],
      columns: [
        {
          title: '',
          dataIndex: 'index',
          key: 'index',
          width: 50,
          scopedSlots: { customRender: 'key' }
        },
        {
          title: '',
          dataIndex: 'operation',
          key: 'operation',
          width: 30,
          scopedSlots: { customRender: 'operation' }
        },
        {
          title: '音乐标题',
          dataIndex: 'name',
          key: 'name',
          ellipsis: true,
          scopedSlots: { customRender: 'name' }
        },
        {
          title: '歌手',
          dataIndex: 'ar',
          key: 'ar',
          width: 150,
          ellipsis: true,
          scopedSlots: { customRender: 'ar' }
        },
        {
          title: '专辑名',
          dataIndex: 'al',
          key: 'al',
          width: 150,
          ellipsis: true,
          scopedSlots: { customRender: 'al' }
        },
        {
          title: '时长',
          dataIndex: 'duration',
          key: 'duration',
          ellipsis: true,
          width: 80,
          scopedSlots: { customRender: 'duration' }
        },
      ],
      // 专辑评论参数
      params: {
        id: this.$route.query.id,
        limit: 20,
        offset: 0,
        // before: 0,
        timestamp: new Date().getTime()
      },
      comments: [],
      total: 0,
      // 显示隐藏收藏按钮
      subShow: true
    }
  },

  computed: {
    albumId() {
      return this.$route.query.id
    },
    getDiscuss() {
      return this.$refs.discuss;
    },
    publishTime() {
      return changeTimeStamp(this.album.publishTime);
    },
    description() {
      if (this.album && this.album.description) {
        return this.album.description.split('\n');
      }
      return '';
    }
  },

  watch: {
    // 监听路由id调用接口
    '$route.query.id': {
      handler(value) {
        this.params.id = value;
        // this.$store.commit('main/ISPLAYED', false);
        this.getAlbum();
        this.getDynamicAlbum();
      },
      immediate: true
    }
  },

  methods: {
    // 获取专辑详情
    async getAlbum() {
      const res = (await albumInfo(this.albumId)).data;
      this.album = Object.freeze(res.album);
      this.songs = Object.freeze(res.songs);
      this.$store.commit('main/LOADING', false);
    },
    // 获取专辑动态信息,如是否收藏等
    async getDynamicAlbum() {
      const res = (await dynamicAlbum(this.albumId)).data;
      this.subShow = !res.isSub;
      this.dynamicInfo = res;
      // 评论数赋值
      this.tabList[1].tabName = `评论(${res.commentCount})`;
    },
    // 获取专辑评论
    async getAlbumComments() {
      const res = (await albumComments(this.params)).data;
      this.comments = Object.freeze(res.comments);
      this.total = Object.freeze(res.total);
    },
    // 点击收藏或取消收藏专辑
    async subOne(t) {
      const res = await subAlbum({
        t,
        id: this.albumId,
        timestamp: new Date().getTime()
      });
      this.subShow = !this.subShow
      if (res.data.code === 200) {
        // 如果有message就提示message
        if (res.data.message) {
          this.$message.error(res.data.message);
          return;
        }
        // 没有就按照t来判断
        if (t) {
          this.$message.success('收藏成功');
          this.dynamicInfo.subCount += 1;
        } else {
          this.$message.success('取消收藏成功');
          this.dynamicInfo.subCount -= 1;
        }
      } else {
        this.$message.error('收藏失败');
      }
    },
    playAll() {
      // 当前需要播放的音乐信息
      this.$store.commit('main/ISPLAYED', true);
      this.$store.commit('detail/AUDIOID', this.songs[0]);
      this.$store.commit('detail/AUDIOLIST', this.songs);
    },
    target(name) {
      this.modules = name;
      switch(name) {
        case 'comments':
          this.getAlbumComments();
          // 改变参数调用接口查询评论
          this.getDiscuss.params.type = 3;
          this.getDiscuss.params.id = this.albumId;
          this.getDiscuss.getHotComments();
          break;
        case 'albumDetail':
          break;
        default:
      }
    },
    // 点击分页后，滚动回最新评论标题处
    scroll(current) {
      this.params.offset = (current - 1) * this.params.limit;
      this.getAlbumComments();
      const detail = document.querySelector('#album-detail');
      const lastDOM = this.$refs.discuss.$el.childNodes;
      detail.scrollTo({
        left: 0,
        top: lastDOM[lastDOM.length - 1].lastChild.offsetTop - 95,
        behavior: 'smooth'
      })
    },
    goDetail(id) {
      this.$router.push({
        name: 'artistdetail',
        query: { id }
      })
    }
  }
}
</script>

<style lang="less" scoped>
.sing-name {
  color: #3771dd;
  &::after {
    display: inline-block;
    content: '/';
    color: #000;
  }
  &:last-child::after {
    display: none;
  }
}
/deep/ul.tab-list {
  margin-left: 0 !important;
  font-size: 16px;
}
.description {
  text-indent: 2em;
  line-height: 3;
  width: 100%;
}
</style>